<!doctype html>
<html class="no-js" lang="zxx" xmlns:th="http://www.thymeleaf.org">
<head>
  <meta charset="utf-8">
  <meta http-equiv="x-ua-compatible" content="ie=edge">
  <title>时尚衣橱购物商城</title>
  <meta name="description" content="Default Description">
  <meta name="keywords" content="E-commerce" />
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <!-- place favicon.ico in the root directory -->
  <link rel="shortcut icon" type="image/x-icon" href="img/icon/favicon.png">
  <!-- Google Font css -->
  <link href="https://fonts.googleapis.com/css?family=Lily+Script+One" rel="stylesheet">

  <!-- mobile menu css -->
  <link rel="stylesheet" href="/css/meanmenu.min.css">
  <!-- animate css -->
  <link rel="stylesheet" href="/css/animate.css">
  <!-- nivo slider css -->
  <link rel="stylesheet" href="/css/nivo-slider.css">
  <!-- owl carousel css -->
  <link rel="stylesheet" href="/css/owl.carousel.min.css">
  <!-- slick css -->
  <link rel="stylesheet" href="/css/slick.css">
  <!-- price slider css -->
  <link rel="stylesheet" href="/css/jquery-ui.min.css">
  <!-- fontawesome css -->
  <link rel="stylesheet" href="/css/font-awesome.min.css">
  <!-- fancybox css -->
  <link rel="stylesheet" href="/css/jquery.fancybox.css">
  <!-- bootstrap css -->
  <link rel="stylesheet" href="/css/bootstrap.min.css">
  <!-- default css  -->
  <link rel="stylesheet" href="/css/default.css">
  <!-- style css -->
  <link rel="stylesheet" href="../static/css/style.css">
  <!-- responsive css -->
  <link rel="stylesheet" href="/css/responsive.css">
  <link rel="stylesheet" href="/css/responsive.css">
  <link rel="stylesheet" href="/css/responsive.css">
  <link rel="stylesheet" href="/css/responsive.css">
  <link rel="stylesheet" href="/css/shortcode/header.css">
  <link rel="stylesheet" href="/css/shortcode/service.css">
  <link rel="stylesheet" href="/css/shortcode/product.css">
  <link rel="stylesheet" href="/css/shortcode/slider.css">
  <link rel="stylesheet" href="/css/shortcode/parallax.css">
  <link rel="stylesheet" href="/css/shortcode/login.css">
  <link rel="stylesheet" href="/css/shortcode/subscribe.css">
  <link rel="stylesheet" href="/css/shortcode/footer.css">
  <link rel="stylesheet" href="/css/shortcode/shop.css">
  <link rel="stylesheet" href="/css/shortcode/theme-default.css">
  <link rel="stylesheet" href="/css/shortcode/blog.css">
  <link rel="stylesheet" href="/css/shortcode/header.css">
  <link rel="stylesheet" href="/css/shortcode/theme-default.css">
  <link rel="stylesheet" href="/css/shortcode/single-product.css">
  <link rel="stylesheet" href="/css/shortcode/checkout.css">
  <link rel="stylesheet" href="/css/shortcode/cart.css">
  <!-- modernizr js -->
  <script src="/js/vendor/modernizr-2.8.3.min.js"></script>
  <script>
    window.onload=function (){
      $(document).ready(function() {
        var msg = '[[${msg}]]'; // 使用Thymeleaf语法获取后端传递的消息
        if (msg !== '') {
          alert(msg); // 如果有消息，则弹出提示框
        }
      });
    }
  </script>
</head>

<body>

<!-- Wrapper Start -->
<div class="wrapper">
  <!-- Header Area Start -->
  <header>
    <!-- Kiosk Header Top Start -->
    <div class="kiosk-header-top">
      <div class="container">
        <div class="row">
          <!-- Header Top left Start -->
          <div class="col-lg-6 col-md-12 d-center">
            <div class="kiosk-header-top-left">
              <i class="fa fa-phone"></i>中软国际: 400-183-1066
            </div>
          </div>
          <!-- Header Top Right Start -->
          <div class="col-lg-6 col-md-12">
            <div class="kiosk-header-top-right">
              <div class="search-box-view">
                <form action="#">
                  <input type="text" class="email" placeholder="Search Your Product" name="product">
                  <button type="submit" class="submit"></button>
                </form>
              </div>
              <!-- Header-list-menu End -->
            </div>
          </div>
          <!-- Header Top Right End -->
        </div>
      </div>
      <!-- Container End -->
    </div>
    <!-- Header Top End -->
    <!-- Kiosk Header Bottom Start -->
    <div th:include="top :: topFragment"></div>
    <!-- Header Bottom End -->
    <form  id="orderForm" method="post">
      <input type="hidden" name="order_id" id="order_id">
    </form>
  </header>
  <div class="kiosk-products-cart wish-list ptb-70">
    <div class="container">
      <!-- Section Title Start -->
      <h2 class="text-capitalize sub-heading">我的订单</h2>
      <!-- Section Title Start End -->
      <div class="row">
        <div class="col-md-12">
          <!-- Form Start -->

            <!-- Table Content Start -->
            <div class="table-content table-responsive">
              <table>
                <thead>
                <tr>
                  <th class="kiosk-product-thumb">订单编号</th>
                  <th class="product-name">订单时间</th>
                  <th class="product-price">订单价格</th>
                  <th class="product-price">订单状态</th>
                  <!--                                            <th class="product-quantity">Quantity</th>-->
                  <!--                                            <th class="product-total">Total</th>-->
                  <th class="kiosk-product-remove">订单详情</th>
                  <th class="kiosk-product-remove">取消订单</th>
                </tr>
                </thead>
                <tbody>

                  <div>
                    <tr th:each="order:${ordersList}">
                      <td class="kiosk-product-thumb" th:value="${order.order_id}" th:text="${order.order_id}"><a href="#">

                      </a>
                      </td>
                      <td class="product-name" th:text="${order.order_time}"><a href="#">Handbag for women</a></td>
                      <td class="product-price" th:text="${order.order_price}"><span class="amount">$232.00</span></td>
                      <td style="color: red" class="product-price" th:if="${order.order_state==0}" th:text="未支付"><span class="amount"></span></td>
                      <td style="color: green" class="product-price" th:if="${order.order_state==1}" th:text="待发货"><span class="amount"></span></td>
                      <!--                                            <td class="product-quantity">-->
                      <!--                                                <input value="1" type="number">-->
                      <!--                                            </td>-->
                      <!--                                            <td class="product-total text-center"><span class="amount">$232.00</span></td>-->
                      <td class="kiosk-product-buy">
<!--                        <input type="hidden" name="order_id" th:value="${order.order_id}" id="order_id">-->
                        <button type="button" class="btn btn-success buy-button" id="buy-button" th:onclick="toOrder_detail([[${order.order_id}]])">订单详情</button>
                      </td>
                      <td class="product-price" text="取消" >
                        <button type="button" class="btn btn-danger" th:value="${order.order_id}" id="delectCid" th:onclick="deleteOrder([[${order.order_id}]])">取消订单</button>
                      </td>
                    </tr>
                  </div>

                </tbody>
              </table>
            </div>
            <!-- Table Content Start -->
          <!-- Form End -->
        </div>
      </div>
      <!-- Row End -->
    </div>
  </div>
  <div th:include="lop :: topFragment"></div>
</div>
<!-- Wrapper End -->
<!-- jquery 3.12.4 -->
<script src="/js/vendor/jquery-1.12.4.min.js"></script>
<!-- mobile menu js  -->
<script src="/js/jquery.meanmenu.min.js"></script>
<!-- scroll-up js -->
<script src="/js/jquery.scrollUp.js"></script>
<!-- owl-carousel js -->
<script src="/js/owl.carousel.min.js"></script>
<!-- slick js -->
<script src="/js/slick.min.js"></script>
<!-- wow js -->
<script src="/js/wow.min.js"></script>
<!-- price slider js -->
<script src="/js/jquery-ui.min.js"></script>
<script src="/js/jquery.countdown.min.js"></script>
<!-- nivo slider js -->
<script src="/js/jquery.nivo.slider.js"></script>
<!-- fancybox js -->
<script src="/js/jquery.fancybox.min.js"></script>
<!-- bootstrap -->
<script src="/js/bootstrap.min.js"></script>
<!-- popper -->
<script src="/js/popper.js"></script>
<!-- plugins -->
<script src="/js/plugins.js"></script>
<!-- stellar -->
<script src="/js/jquery.stellar.min.js"></script>
<script src="/js/parallax.js"></script>
<!-- main js -->
<script src="/js/main.js"></script>
<script>
  function deleteOrder(order_id) {
    // 确认删除操作
    if (confirm('您确定要取消这个订单吗？')) {
      $.ajax({
        url:"/deleteOrder" ,
        type: 'post',
        data: {order_id: order_id},
        success: function(msg) {
          window.alert("取消订单成功");
          location.reload(true);
        },
      });
    }
  }
  function toOrder_detail(orderid){
    $("#order_id").val(orderid);
    $("#orderForm").attr("action","/toOrderDetail");
    $("#orderForm").submit();
  }
</script>
</body>
</html>
